<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <hr>

    <p>age 值：{{ age }} </p>
    <p>count 值：{{ count }}</p>
    <p>总价：{{ totalPrice }}</p>
    <button @click="addCount" class="btn btn-warning">+1</button>
    <button @click="addWithNum(5)" class="btn btn-warning">+5</button>
  </div>
</template>

<script>
// 它提供了一个快速访问state的工具函数 --- mapState
// 先导入
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'Right',
  computed: {
    // age () {
    //   return this.$store.state.age
    // },
    // count () {
    //   return this.$store.state.count
    // }

    // 下面这句话相当于帮你生成上面这两段
    // 中括号里写你想快速访问的state的数据名
    ...mapState(['age', 'count']),
    ...mapGetters(['totalPrice'])
  },
  methods: {
    // addCount () {
    //   this.$store.commit('addCount')
    // },
    // addWithNum (num) {
    //   this.$store.commit('addWithNum', num)
    // }

    // 相当于也是帮你生成了上面的那一段代码
    ...mapMutations(['addCount', 'addWithNum'])
  }
}
</script>

<style>
</style>
